<template>
  <div class="outletBox">
    <a-dropdown placement="bottomRight" v-model="visible">
      <div class="ant-pro-account-avatar">
        <a-icon type="unordered-list" />
        <span>切换门店</span>
      </div>
      <template v-slot:overlay>
        <div class="changeBox">
          <div class="title">
            <span class="change">切换门店</span>
            <div class="back">
              <span>返回平台</span>
              <a-icon type="right" />
            </div>
          </div>
          <div class="searchBox">
            <a-input-search  placeholder="请输入门店名称" style="width: 288px" @search="onSearch" />
          </div>
          <div class="outletList">
            <div class="outletItem choosed">
              <div class="info">
                <div class="pic">
                  <img src="" alt="" />
                </div>
                <div class="name">
                  <span>赤店商城</span>
                  <span>商城后台</span>
                </div>
              </div>
              <span class="current">当前店铺</span>
            </div>
            <div class="outletItem">
              <div class="info">
                <div class="pic">
                  <img src="" alt="" />
                </div>
                <div class="name">
                  <span>赤店商城</span>
                  <span>商城后台</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible:false
    }
  },
  methods: {
    // 搜索门店名称
    onSearch(e) {},
  },
}
</script>

<style lang="less" scoped>
.outletBox {
  width: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .ant-pro-account-avatar {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    .anticon {
      color: #000;
      margin-right: 8px;
    }
  }
}
.outletBox:hover {
  background-color: #f9f9f9;
}
.changeBox {
  width: 336px;
  background-color: #fff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 100;
  font-family: PingFang SC;
  .title {
    display: flex;
    align-items: center;
    height: 44px;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    justify-content: space-between;
    padding: 0 16px;
    .change {
      font-size: 14px;
      font-weight: 600;
      color: #000;
    }
    .back {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
  .searchBox {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
  }
  .outletList {
    .outletItem {
      width: 100%;
      height: 72px;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      padding: 15px 25px 0 25px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      .info {
        display: flex;
        align-items: stretch;
        .pic {
          width: 32px;
          height: 32px;
          background-color: #f2f2f2;
          border-radius: 4px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .name {
          display: flex;
          flex-direction: column;
          margin-left: 15px;
          span:nth-child(1) {
            font-size: 14px;
            color: #000;
          }
          span:nth-child(2) {
            font-size: 12px;
            color: #707070;
            margin-top: 8px;
          }
        }
      }
      .current {
        width: 64px;
        text-align: center;
        height: 22px;
        line-height: 22px;
        border: 1px solid #91d5ff;
        border-radius: 1px;
        font-size: 12px;
        color: #216dd9;
        background-color: #e6f7ff;
      }
    }
    .choosed {
      background-color: #e6f7ff;
    }
  }
}
</style>